<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- elementUI -->
    <link rel="stylesheet" href="../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../frame/elementUI/lib-master/index.js"></script>
    <!-- jquery -->
    <script src="../frame/jquery/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/chat.css" />
    <link rel="stylesheet" type="text/css" href="css/backgroud.css" />
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!-- 导航 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect1">
            <!-- default-active默认停留位置 -->
            <el-menu-item index="1" ><a href="../chat/index.html">聊天室</a></el-menu-item>
            <el-menu-item index="2"><a href="chatman.html">群聊</a></el-menu-item>

            <el-submenu index="5" class="userList">
                <template slot="title">
                    <span v-show="userLoading==false">未登录</span>
                    <span v-show="userLoading==true">{{userData.username}}</span>
                </template>
                <el-menu-item index="4-1">用户中心</el-menu-item>
                <el-menu-item index="4-2"><a href="/user/logout">注销</a></el-menu-item>
            </el-submenu>
            <el-menu-item index="4" style="float: right" @Click="dialogRequstVisible=true">
                请求列表
                <el-badge is-dot class="item" v-show="demands.length!=0">
                </el-badge>
            </el-menu-item>
        </el-menu>
        <!-- 请求列表层 -->
        <div>
            <el-dialog title="请求列表" :visible.sync="dialogRequstVisible">
                <el-table
                        :data="demands" :header-cell-style="{background:'#f9f9f9',color:'#333'}" row-key="uid"
                        style="height: 200px;margin-top: 10px;" >
                    <el-table-column
                            prop="fromName"
                            label="联系人">
                    </el-table-column>
                    <el-table-column
                            label="描述">
                        <span>对方请求添加您为好友!</span>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">   <!-- 将整个行对象封装为scope -->
                            <el-button type="danger" icon="el-icon-circle-close" size="mini" @click="toRemove(scope.row)" circle></el-button>
                            <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="requestSelect(scope.row)" circle></el-button>
                            <el-button type="success" icon="el-icon-plus" size="mini" @click="toAdd(scope.row)" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <!-- 详情信息展示层 -->
        <div>
            <el-dialog title="信息展示" :visible.sync="informationVisible">
                <el-descriptions title="用户信息">
                    <el-descriptions-item label="用户名">{{information.username}}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{gender(information.gender)}}</el-descriptions-item>
                    <el-descriptions-item label="手机号">{{information.phone}}</el-descriptions-item>
                    <el-descriptions-item label="邮箱">{{information.email}}</el-descriptions-item>
                </el-descriptions>
            </el-dialog>
        </div>
        <!-- 主题 -->
        <div class="container">
            <!-- 侧面 -->
            <div class="side">
                <!-- 添加好友或搜索 -->
                <el-row >
                    <el-col><el-button type="primary" icon="el-icon-zoom-in" style="width: 100%" plain @Click="openSearch()">添加/搜索</el-button></el-col>
                </el-row>
                <!--搜索弹层 -->
                <div>
                    <el-dialog title="添加/搜索好友" :visible.sync="dialogSearchVisible">
                        <el-row>
                            <el-input placeholder="请输入用户名称/手机号/邮箱" v-model="searchData" class="input-with-select">
                                <el-button slot="append" icon="el-icon-search" @Click="searchUser()"></el-button>
                            </el-input>
                        </el-row>
                        <el-table
                                :data="searchFriends" :header-cell-style="{background:'#f9f9f9',color:'#333'}" row-key="uid"
                                style="height: 200px;margin-top: 10px;" @row-click="handleSelect2" :row-style="rowStyle">
                            <el-table-column
                                    prop="username"
                                    label="联系人"
                                    :formatter="usernamef">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">   <!-- 将整个行对象封装为scope -->
                                    <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="select(scope.row)" circle></el-button>
                                    <el-button id="elBtu1" type="danger" icon="el-icon-plus" size="mini" @click="sendRequest(scope.row)" circle></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-dialog>
                </div>
                <!-- 侧面表格 -->
                <!-- header-cell-style：头部背景，@row-click：行点击事件，row-style行变色事件 -->
                <el-table
                        :data="friends" :header-cell-style="{background:'#f9f9f9',color:'#333'}" row-key="id"
                        style="width: 100%!important;" class="menu1" @row-click="handleSelect2" :row-style="rowStyle">
                    <el-table-column
                            prop="username"
                            label="联系人"
                            :formatter="usernamef">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            label="状态"
                            :formatter="statef">
                    </el-table-column>
                </el-table>
            </div>
            <!-- 主要部分 -->
            <div class="main">
                <el-empty class="empty" description="请选择联系人" style="margin-top: 100px"></el-empty>
                <!-- 信息中心 -->
                <div class="context">
                    <el-row >
                        <h5 style="margin-left: 45%;float: left">{{toName}}</h5>
                        <el-button icon="el-icon-more-outline" @Click="selectId()" style="float: right;margin-top: 20px;margin-right: 10px;background-color: #E9EEF3;"></el-button>
                    </el-row>
                    <!-- 消息展示区 -->
                    <div class="messageShow">

                    </div>
                    <!-- 选择区 -->
                    <div class="btn">
                        <el-row>
                            <el-col :span="1"><i class="el-icon-menu"></i></el-col>
                            <el-col :span="1"><i class="el-icon-picture"></i></el-col>
                        </el-row>
                    </div>
                    <!-- 输入区 -->
                    <div class="scanner">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="formData">
                        </el-input>
                        <div style="margin-top: 5px" class="primary" style="display:none;">
                            <el-button type="primary" size="mini" round style="float: right" @click="submit()">发送</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 版本号 -->
</body>
    <script src="../frame/axios/axios.min.js"></script>
    <script src="js/chat.js"></script>
</html>